<template>
  <div class="wechat-business-config-page">
    <lb-table
      ref="lbTable"
      v-el-height-adaptive-table="{bottomOffset:60}"
      border
      element-loading-text="加载中"
      align="center"
      :column="tableData.column"
      :data="tableData.data"
      :pagination="false"
      :merge="['gtName']"
      @fetch="fetchData"
    />
    <div style="margin-top: 20px;">
      <el-button type="primary" :loading="$loadingPlugin.fetchData" @click="search">查询</el-button>
      <el-button type="primary" :loading="$loadingPlugin.success" style="margin-left: 20px;" @click="success">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { queryWechatBusinessConfigList, saveWechatBusinessConfig } from '@/api'

  export default {
    name: 'wechatBusinessConfig',
    data() {
      return {
        tableData: {
          column: [
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsCode',
              label: '商品编码'
            },
            {
              prop: 'goodsName',
              width: 120,
              label: '商品名称'
            },
            {
              prop: 'aliasName',
              width: 120,
              label: '别名'
            },
            {
              prop: 'statistics1',
              label: '居民',
              children: [
                {
                  prop: 'count1',
                  width: 110,
                  label: '下单数量限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                },
                {
                  prop: 'count2',
                  width: 110,
                  label: '下单天数限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                }
              ]
            },
            {
              prop: 'statistics2',
              label: '商业',
              children: [
                {
                  prop: 'count3',
                  width: 110,
                  label: '下单数量限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                },
                {
                  prop: 'count4',
                  width: 110,
                  label: '下单天数限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                }
              ]
            },
            {
              prop: 'statistics3',
              label: '工业',
              children: [
                {
                  prop: 'count5',
                  width: 110,
                  label: '下单数量限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                },
                {
                  prop: 'count6',
                  width: 110,
                  label: '下单天数限制',
                  render: (h, scope) => <el-input-number value={ scope.row[scope.column.property] } onInput={ (val) => { scope.row[scope.column.property] = val } } controls={false} min={0} max={999} precision={0}></el-input-number>
                }
              ]
            },
            {
              prop: 'statistics4',
              width: 200,
              label: '允许销售',
              render: (h, { row }) => {
                const dom = <div>
                  <el-checkbox style='margin-right: 10px;' v-model={row.csmType1Check}>居民</el-checkbox>
                  <el-checkbox style='margin-right: 10px;' v-model={row.csmType2Check}>商业</el-checkbox>
                  <el-checkbox v-model={row.csmType4Check}>工业</el-checkbox>
                </div>
                return dom
              }
            },
            {
              prop: 'statistics5',
              width: 110,
              label: '允许单独下单',
              render: (h, { row }) => {
                const dom = <el-switch
                  v-model={row.switch}
                  activeText='是'
                  inactiveText='否'
                >
                </el-switch>
                return dom
              }
            }
          ],
          data: []
        }
      }
    },
    methods: {
      async fetchData() {
        const res = await queryWechatBusinessConfigList()
        this.tableData.data = res.data.map(item => {
          return {
            ...item,
            csmType1Check: (item.csmType1 & 1) > 0,
            csmType2Check: (item.csmType2 & 1) > 0,
            csmType4Check: (item.csmType4 & 1) > 0,
            count1: (item.csmType1 & 2046) >> 1,
            count2: (item.csmType1 & 2095104) >> 11,
            count3: (item.csmType2 & 2046) >> 1,
            count4: (item.csmType2 & 2095104) >> 11,
            count5: (item.csmType4 & 2046) >> 1,
            count6: (item.csmType4 & 2095104) >> 11,
            switch: (item.otherOption & 1) > 0
          }
        })
      },
      async success() {
        const copy = JSON.parse(JSON.stringify(this.tableData.data))
        copy.forEach(item => {
          item.csmType1 = 0
          item.csmType2 = 0
          item.csmType4 = 0
          item.otherOption = 0
          item.csmType1 |= (parseInt(item.count1) & 1023) << 1
          item.csmType1 |= (parseInt(item.count2) & 1023) << 11
          item.csmType2 |= (parseInt(item.count3) & 1023) << 1
          item.csmType2 |= (parseInt(item.count4) & 1023) << 11
          item.csmType4 |= (parseInt(item.count5) & 1023) << 1
          item.csmType4 |= (parseInt(item.count6) & 1023) << 11
          if (item.csmType1Check) {
            item.csmType1 |= 1
          }
          if (item.csmType2Check) {
            item.csmType2 |= 1
          }
          if (item.csmType4Check) {
            item.csmType4 |= 1
          }
          if (item.switch) {
            item.otherOption |= 1
          }
        })
        await saveWechatBusinessConfig(copy)
        this.$refs.lbTable.fetch()
        this.$notify({
          title: '提示',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
      },
      search() {
        this.$refs.lbTable.fetch()
      }
    }
  }
</script>

<style lang="scss" scoped>
.wechat-business-config-page {
  text-align: center;
  /deep/ .el-input-number.is-without-controls .el-input__inner {
    width: 90px;
    padding-right: 5px;
    padding-left: 5px;
  }
}
</style>
